<!-- 导航栏 -->
<template>
	<view class="navbar" :style="[navbarStyle, {'background-color': backgroundColor}]">
		<view class="content">我的</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	
	const props = defineProps({
		scrollTop: 0, // 滚动条距离顶部高度
	});
	
	// 背景色
	const backgroundColor = computed(() => {
		const alpha = (props.scrollTop - 5) / 50;
		return `rgba(255,255,255, ${alpha})`;
	});
	
	// 导航栏高度
	const navbarStyle = function() {
		const statusBarHeight = getApp().globalData.statusBarHeight;
		const navBarHeight = getApp().globalData.navBarHeight;
		return { 'padding-top': statusBarHeight + 'px', 'height': navBarHeight + 'px' };
	}();
</script>

<style lang="scss" scoped>
	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		
		.content {
			display: flex;
			align-items: center;
			justify-content: center;
			height: inherit;
			font-weight: bold;
			font-size: 36rpx;
			color: #222222;
		}
	}
</style>